<template>
  <div>
    <div>
      <el-link type="success" style="margin-left: 10px" @click="back">实时监控<i class="el-icon-view el-icon--right"></i> </el-link>
    </div>

    <div style="margin: 10px;font-width: bold;font-family: 微软雅黑">监控处理</div>
    <el-radio-group style="margin-top: 10px;margin-left: 10px;display: flex" v-model="radio" @input="handleRadioChange">
      <el-radio :label="0">无</el-radio>
      <el-radio :label="1">区域入侵检测</el-radio>
      <el-radio :label="2">人脸识别</el-radio>
      <el-radio :label="3">跌倒检测</el-radio>
      <el-radio :label="4">情绪监测</el-radio>
      <el-radio :label="5">交互识别</el-radio>
      <el-radio :label="6">火灾监测</el-radio>
      <el-radio :label="7">语音情绪识别</el-radio>
      <el-radio :label="8">吸烟行为检测</el-radio>
    </el-radio-group>
    <div style="margin-top: 30px;display: flex;justify-content: center;align-items: center;">
      <img v-if="radio!==1 && info.url!==undefined && info.url.length>0&&info.url!==null"
           :src="'http://127.0.0.1:5000/'+process+'?id='+info.id+'&src='+info.url"
           frameborder="0" width="600px" style="height: fit-content;min-height: 400px;box-shadow:  1px 1px 3px 2px rgb(177,177,177)">
      <img v-else-if="radio==1"
           :src="'http://127.0.0.1:5000/'+process+'?id='+info.id+'&src='+info.url+'&type='+info.type+'&x='+info.x+'&y='+info.y+'&length='+info.length+'&width='+info.width+'&w='+info.w+'&h='+info.h"
           frameborder="0" width="600px" style="height: fit-content;min-height: 400px">
      <el-image v-else style="width: 600px;height: 400px"></el-image>
    </div>

  </div>
</template>

<script>
import {audioEmotion, getArea} from "@/api/monitorApi";
// import {getByArea} from "@/api/recordApi";
const processTypeOptions = [
  { key: 0, display_name: 'video_feed' },
  { key: 1, display_name: 'tutelage/monitoring/intrusionDetection' },
  { key: 2, display_name: 'tutelage/monitoring/faceRecognition' },
  { key: 3, display_name: 'tutelage/monitoring/fallDetection' },
  { key: 4, display_name: 'tutelage/monitoring/emotionAnalyze' },
  { key: 5, display_name: 'tutelage/monitoring/interactDetection' },
  { key: 6, display_name: 'tutelage/monitoring/fireDetection' },
  { key: 7, display_name: 'video_feed' },
  { key: 8, display_name: 'tutelage/monitoring/smokingDetection' }
]
export default {
  name: "MonitorDetail",
  data(){
    return{
      processTypeOptions,
      timeBd:0,
      id:-1,
      info:{},
      radio:0,
      process:'',
      list:[]
    }
  },
  methods:{
    getDetail(){
      getArea({
        id:this.id
      }).then(res => {
        if(res.code===200 && res.result){
          this.info = res.result
          console.log(this.info)
        }else{
          alert(res.msg)
        }
      }).catch(err => {
        console.log(err);
      })
    },
    handleRadioChange(){
      this.process = this.processTypeOptions[this.radio].display_name
    },
    back(){
      this.$router.push({
        path:'/home/monitor'
      })
    }
  },
  created() {
    this.id = Number(this.$route.params.id)
    this.radio = 0
    this.process = this.processTypeOptions[this.radio].display_name
    // setInterval(this.timer,10000)
    var interval = setInterval(() => {
      this.timeBd += 1;
      if(this.timeBd === 5){
        clearInterval(interval);
        this.timeBd = 0
      }
      if(this.radio===7){
        audioEmotion(this.id, this.info.url).then(res => {
          if(res.code===200 && res.result){
            console.log(res.result.emotion)
            this.$notify({
              title: res.result.emotion,
              message: '检测到语音情绪',
              type: 'success',
              duration: 2000
            })
          }else{
            alert(res.msg)
          }
        }).catch(err => {
          console.log(err);
        })
      }
    }, 10000);
  },
  mounted() {
    this.getDetail()
    // this.getRecordList()
  }
}
</script>

<style scoped>

</style>
